<template>
  <div>
    <!-- 插值表达式：
    {{ $store.state.name }}
    {{ $store.state.count }}
    {{ $store.state.token }} -->
    <div>计算属性封装：{{ name }}{{ count }}{{ token }}</div>
    <!-- <button @click="$store.state.count++">直接增加（报错）</button> -->
    <button @click="$store.commit('addCount', 3)">mutations增加3</button>
    <button @click="$store.commit('addCount', 10)">mutations增加10</button>
    <button @click="addCount(10)">mutations增加10</button>
  </div>
</template>

<script>
//引入辅助函数
import { mapState } from "vuex";
// console.log(mapState(['count','name','token']));
export default {
  //如果觉得模板中每次都写完整的state路径非常麻烦
  //可以考虑封装到计算属性当中
  //原因
  // 1、它本身是作为数据渲染
  // 2、它可能后续会改变
  computed: {
    ...mapState(["count", "name", "token"]),
    //相当于生成了以下三个函数
    //...{count:f,name:f,token:f}
    // name() {
    //   return this.$store.state.name;
    // },
    //  count() {
    //   return this.$store.state.count;
    // },
    //  token() {
    //   return this.$store.state.token;
    // },
  },
  methods: {
    addCount() {
      this.$store.commit("addCount", data);
    },
  },
  // created() {
  //   console.log(this.$store);
  // },
};
</script>

<style>
</style>